<template>
  <div class="about">
    <el-container style="display: flex">
      <el-menu
        :default-active="checked"
        class="el-menu-vertical-demo"
        :class="$route.path !== '/BuyerCenter' ? 'newElMenu' : ''"
        router
        @open="handleOpen"
        unique-opened
        @select="handleSelect"
        :default-openeds="defaultOpenedsArray"
        @close="handleClose"
        text-color="#000"
        active-text-color="#00519D"
      >
        <div v-for="item in menuList" :key="item.path + ''">
          <!-- 没有子菜单 -->
          <template v-if="item.children && item.children.length == 0">
            <el-menu-item
              :index="item.path + ''"
              :disabled="item.path == '' ? true : false"
            >
              <img
                style="margin: 0 10px 0 5px; width: 16px; height: 16px"
                :src="
                  item.path == nav_active ? item.AFTER_CLICK : item.BEFORE_CLICK
                "
                alt=""
              />
              <span slot="title"> {{ item.title }}</span>
            </el-menu-item>
          </template>

          <!-- 有子菜单 -->
          <el-submenu v-else :index="item.path + ''">
            <template slot="title">
              <img
                style="margin: 0 10px 0 5px; width: 16px; height: 16px"
                :src="chooseIcon(item, $route.path)"
                alt=""
              />
              <span slot="title"> {{ item.title }}</span>
            </template>

            <template v-for="child in item.children">
              <!-- 这里是类似递归循环 -->
              <sidebar-item
                v-if="child.children && child.children.length > 0"
                :item="child"
                :key="child.path + ''"
              />
              <el-menu-item
                v-else
                :key="child.path + ''"
                :index="child.path"
                style="padding-left: 50px"
              >
                <span slot="title"> {{ child.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </div>
      </el-menu>

      <el-main class="mainBox" ><router-view></router-view></el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      checked: '/BuyerCenter',
      breadtitle: '个人中心',
      nav_active: '/BuyerCenter',
      defaultOpenedsArray: [],
      menuList: [],
      buyerMenuList: [
        {
          title: '个人中心',
          path: '/BuyerCenter',
          BEFORE_CLICK: require('@/static/Imgs/userImg/grzx.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/grzx1.png'),
          children: []
        },
        {
          title: '订单管理',
          path: '##',
          BEFORE_CLICK: require('@/static/Imgs/userImg/ddgl.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/ddgl1.png'),
          children: [
            {
              title: '我的订单',
              path: '/MyOrder'
            },
            {
              title: '售后订单',
              path: '/AfterSaleOrder'
            }
          ]
        },
        {
          title: '货源中心',
          path: '#####',
          BEFORE_CLICK: require('@/static/Imgs/userImg/hyzx.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/hyzx1.png'),
          children: [
            {
              title: '下载记录',
              path: '/DownloadRecord'
            },
            {
              title: '购物车',
              path: '/ShoppingCart'
            }
          ]
        },
        {
          title: '我的收藏',
          path: '#########',
          BEFORE_CLICK: require('@/static/Imgs/userImg/wdsc.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/wdsc1.png'),
          children: [
            {
              title: '商品收藏',
              path: '/CommodityCollection'
            },
            {
              title: '店铺收藏',
              path: '/StoreCollection'
            }
          ]
        },
        {
          title: '个人资料',
          path: '/PersonalData',
          BEFORE_CLICK: require('@/static/Imgs/userImg/grzl.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/grzl1.png'),
          children: []
        },
        {
          title: '帮助中心',
          path: '/HelpCenter',
          BEFORE_CLICK: require('@/static/Imgs/userImg/bzzx.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/bzzx1.png'),
          children: []
        }
        // {
        //   title: "供应商入驻",
        //   path: "/enroll?index=second",
        //   BEFORE_CLICK: require("@/static/Imgs/userImg/gysrz.png"),
        //   AFTER_CLICK: require("@/static/Imgs/userImg/gysrz1.png"),
        //   children: [],
        // },
      ],
      sellerMenuList: [
        {
          title: '个人中心',
          path: '/sellerCenter',
          BEFORE_CLICK: require('@/static/Imgs/userImg/grzx.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/grzx1.png'),
          children: []
        },
        {
          title: '商品管理',
          path: '##',
          BEFORE_CLICK: require('@/static/Imgs/userImg/spgl.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/spgl1.png'),
          children: [
            {
              title: '发布商品',
              path: '/CommodityCategory'
            },
            {
              title: '店铺商品',
              path: '/cangpushop'
            },
            {
              title: '清仓商品',
              path: '/ClearanceGoods'
            },
            {
              title: '直播选品',
              path: '/LiveSelection'
            }
          ]
        },
        // {
        //   title: "广告位",
        //   path: "#####",
        //   BEFORE_CLICK: require("@/static/Imgs/userImg/ggw.png"),
        //   AFTER_CLICK: require("@/static/Imgs/userImg/ggw1.png"),
        //   children: [
        //     {
        //       title: "广告报名",
        //       path: "/adentry",
        //     },
        //     {
        //       title: "我的广告",
        //       path: "/MyAD",
        //     },
        //   ],
        // },
        // {
        //   title: '账户资金',
        //   path: '#########',
        //   BEFORE_CLICK: require('@/static/Imgs/userImg/zhzj.png'),
        //   AFTER_CLICK: require('@/static/Imgs/userImg/zhzj1.png'),
        //   children: [
        //     {
        //       title: '我的货款',
        //       path: '/mypayment'
        //     },
        //     {
        //       title: '我的账号',
        //       path: '/myaccount'
        //     },
        //     {
        //       title: '资金安全',
        //       path: '/paysafe'
        //     }
        //   ]
        // },
        {
          title: '店铺管理',
          path: '/shopMange',
          BEFORE_CLICK: require('@/static/Imgs/userImg/dpgl.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/dpgl1.png'),
          children: []
        },
        {
          title: '帮助中心',
          path: '/HelpCenter',
          BEFORE_CLICK: require('@/static/Imgs/userImg/bzzx.png'),
          AFTER_CLICK: require('@/static/Imgs/userImg/bzzx1.png'),
          children: []
        }
        // {
        //   title: "功能权益",
        //   path: "/FunctionalInterest",
        //   BEFORE_CLICK: require("@/static/Imgs/userImg/gnqy.png"),
        //   AFTER_CLICK: require("@/static/Imgs/userImg/gnqy1.png"),
        //   children: [],
        // },
      ],
      type: false,
      item: {}
    }
  },
  created () {
    this.checked = this.$route.path
    this.type = window.localStorage.getItem('type')
    if (this.type == 'true') {
      this.menuList = this.sellerMenuList
      if (this.checked == '/IndividualCenter') {
        this.$router.push('/sellerCenter')
      }
    } else {
      this.menuList = this.buyerMenuList
      if (this.checked == '/IndividualCenter') {
        this.$router.push('/BuyerCenter')
      }
    }
  },
  activated () {
    this.checked = this.$route.path
    this.type = window.localStorage.getItem('type')
    if (this.type == 'true') {
      this.menuList = this.sellerMenuList
      if (this.checked == '/IndividualCenter') {
        this.$router.push('/sellerCenter')
      }
    } else {
      this.menuList = this.buyerMenuList
      if (this.checked == '/IndividualCenter') {
        this.$router.push('/BuyerCenter')
      }
    }
  },
  methods: {
    // 退出登录
    logout () {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },

    chooseIcon (item, route) {
      console.log(item, route)
      this.item = item
      let n = 0 // 用于判断当前一级菜单下的二级菜单是否被点击
      for (let i = 0; i < item.children.length; i++) {
        if (item.children[i].path == this.nav_active) {
          n = 1
        }
      }
      if (n == 1) {
        // 被点击了，返回高亮图标
        return item.AFTER_CLICK
      } else {
        // 未被点击，返回未高亮图标
        return item.BEFORE_CLICK
      }
    },
    handleSelect (key, keyPath) {
      console.log(key)
      this.menuList.forEach((el) => {
        if (el.path == key) {
          if (el.children.length == 0) {
            this.defaultOpenedsArray = []
          }
        }
      })
      this.nav_active = key
      this.checked = key
      console.log(key, keyPath)
      if (key == '/gzt') {
        this.breadtitle = '个人中心'
      }
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  watch: {
    $route (to) {
      console.log(to.path)
      this.checked = to.path
      this.type = window.localStorage.getItem('type')
      if (this.type == 'true') {
        this.menuList = this.sellerMenuList
        if (this.checked == '/IndividualCenter') {
          this.$router.push('/sellerCenter')
        }
      } else {
        this.menuList = this.buyerMenuList
        if (this.checked == '/IndividualCenter') {
          this.$router.push('/BuyerCenter')
        }
      }
    }
  }
}
</script>
<style>
.el-main {
  padding: 0;
  background: #fff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
  padding: 20px;
}

.el-submenu.is-active .el-submenu__title {
  color: #e22a1f !important;
}

.el-menu-item.is-active {
  background: #f5f7f9 !important;
  color: #e22a1f !important;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.el-submenu__title:focus,
.el-submenu__title:hover {
  background: #f5f7f9 !important;
  color: #e22a1f !important;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.el-menu-item:focus,
.el-menu-item:hover {
  background: #f5f7f9 !important;
  color: #e22a1f !important;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}

/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-menu {
  height: 100%;
}
.newElMenu {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
}

.el-menu:not(.el-menu--collapse) {
  width: 260px;
}

.el-container {
  width: 100%;
  height: 100%;
}
</style>

<style scoped lang="scss">
.about {
  width: 100%;
  height: 88vh;
  background: #fff;

  /deep/ .demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
  }
}
</style>
<style >
@media screen and (max-width: 1300px) {
  .about {
    height: 84vh !important;
  }
  .el-main {
    padding: 0;
    background: #fff;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
    padding: 20px;
  }

  .el-submenu.is-active .el-submenu__title {
    color: #e22a1f !important;
  }

  .el-menu-item.is-active {
    background: #f5f7f9 !important;
    color: #e22a1f !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .el-submenu__title:focus,
  .el-submenu__title:hover {
    background: #f5f7f9 !important;
    color: #e22a1f !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .el-menu-item:focus,
  .el-menu-item:hover {
    background: #f5f7f9 !important;
    color: #e22a1f !important;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  /*隐藏文字*/
  .el-menu--collapse .el-submenu__title span {
    display: none;
  }

  /*隐藏 > */
  .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }

  .el-menu {
    height: 100%;
  }
  .newElMenu {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
  }

  .el-menu:not(.el-menu--collapse) {
    max-width: 160px;
  }

  .el-container {
    width: 100%;
    height: 100%;
  }
  .el-submenu .el-menu-item {
    padding: 0;
    min-width: 160px;
  }
  .el-menu-item {
    height: 44px;
    line-height: 44px;
  }
}
</style>
